<template>
  <div id="app-containe" v-loading="loading">
    <div style="color: red;text-align: center;">*注意默认只查询当天的统计数据,如果要查询其他的,请选择范围查询</div>
    <br>
    <!--查询条件开始-->
    <el-card class="cardmargin">
      <el-form ref="queryForm" :model="queryParams" label-width="68px" :inline="true">
        <el-form-item label="选择日期">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width:240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholde="开始日期"
            end-placeholde="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--查询结果-->
    <el-card class="cardmargin">
      合计收入:￥<span>{{ revenueObj.totalRevenue }}</span>
    </el-card>
    <el-card class="cardmargin">
      收支概况:
      <span class="spancls">总收入{{ revenueObj.overview.toll }}</span>
      <span class="spancls spanred">总退费￥{{ revenueObj.overview.refund }}</span>
    </el-card>
    <el-card class="cardmargin">
      收入渠道:
      <span class="spancls">现金支付￥{{ revenueObj.channel.cashIncome }}</span>
      <span class="spancls">支付宝支付￥{{ revenueObj.channel.alipayIncome }}</span>
      <span class="spancls">现金退费￥{{ revenueObj.channel.cashRefund }}</span>
      <span class="spancls">支付宝退费￥{{ revenueObj.channel.alipayRefund }}</span>
    </el-card>
    <!--回表开始-->
    <el-card>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="8">
          <div>
            <pie-chart ref="p1" :prop-pie-data="revenueOverview" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div>
            <pie-chart ref="p2" :prop-pie-data="incomeChanel" />
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="8">
          <div>
            <pie-chart ref="p3" :prop-pie-data="refund" />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!--end-->
  </div>
</template>

<script>

import PieChart from '@/views/statistics/revenue/components/PieChart'
import { handleQuery } from '@/api/statistics/revenue'

export default {
  components: {
    PieChart
  },
  data() {
    return {
      // 遮罩
      loading: false,
      // 查询参数
      queryParams: {},
      // 日期范围
      dateRange: [],
      // 数据结构
      revenueObj: {
        totalRevenue: 0.00, // 合计收入
        overview: { // 收支概况:总收入￥0 总退费￥0
          toll: 0.00,
          refund: 0.00
        },
        channel: { // 收入渠道:现金支付￥0,支付宝支付￥0,现金退费￥0,支付宝退费￥0
          cashIncome: 0.00,
          alipayIncome: 0.00,
          cashRefund: 0.00,
          alipayRefund: 0.00
        }
      },
      revenueOverview: { // 收支概况
        title: '',
        data: [
          { value: 0, name: '' },
          { value: 0, name: '' }
        ]
      },
      incomeChanel: { // 收入渠道
        title: '',
        data: [
          { value: 112, name: '' },
          { value: 5232, name: '' }
        ]
      },
      refund: { // 退款金额和渠道
        title: '',
        data: [
          { value: 42, name: '' },
          { value: 12, name: '' }
        ]
      }
    }
  },
  created() {
    this.handleQuery1()
  },
  methods: {
    // 条件查询
    handleQuery1() {
      console.log(this.dateRange)
      // this.queryParams = { 'beginTime': this.dateRange[1] }
      handleQuery(this.addDateRange(this.queryParams, this.dateRange)).then(res => {
        var data = res.data
        console.log(data)
        // 数据结构部分赋值
        this.revenueObj = data.revenueObj
        // 收支概况部分赋值
        this.revenueOverview = data.revenueOverview
        // 退款金额和渠道部分赋值
        this.refund = data.refund
        // 收入渠道部分赋值
        this.incomeChanel = data.incomeChanel
      })
    },
    // 重置查询条件
    resetQuery() {
      this.resetForm('queryForm')
      this.dateRange = []
    }
  }
}
</script>

<style>
	.cardmargin{
		margin-top: 3px;
	}
	.spancls{
		display: inline-block;
		margin-left: 80px;
	}
	.spanred{
		color: red;
	}
</style>
